
html, body {
    height: 100%;
    width: 100%;
}

.body-rna-viz {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 9pt;
    background-color: #f8f8f8;
    overflow: hidden;
}

.samples-overlay {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    z-index: 1;
}

.samples-overlay > span {
    margin-left: 45%;
}

.main-container {
    height: 100%;
    width: 100%;
}

.row {
    margin: 0;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4,
.col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    padding-left: 0px;
}

.rna-header {
    background-color: #2c3143;
    color: white;
    padding-left: 2.5%;
    cursor: pointer;
}

.rna-header-row {
    margin: 0 -7.9%;
}

.one-sample {
    display: none;
    height: 100%;
    width: 100%;
    margin: 0 1% 0 1%;
}

.top-row {
    height: 6%;
    width: 100%;
    margin-top: 0.5%;
}

.filter-row {
    display: none;
    height: 4%;
    width: 100%;
    margin-top: 0.1%;
}

.heading {
    margin-left: 5.5%;
}

.elem-rna {
    font-size: 9pt;
}

.rna-transcriptions-container {
    padding-left: 0;
    width: 16%;
    height: 100%;
    border-right: 1px solid black;
    overflow: auto;
}

.landing-page {
    margin-top: 1%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: white;
    height: 84%;
    width: 100%;
    overflow: auto;
}

.rna-results {
    margin-top: 1%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: white;
    height: 83%;
    width: 100%;
    display: none;
}

.footer-row {
    height: 8%;
    width: 100%;
    display: none;
}

.transcriptions-ids {
    overflow-y: auto;
    padding-top: 0.5%;
    height: 100%;
    font-size: 8pt;
}

.sample-name {
    margin-top: 1%;
    font-weight: bold;
}

.sample-current-size {
    font-size: 8pt;
}

.common-genes {
    display: none;
    height: 50%;
    width: 84%;
    overflow: auto;
    border-bottom: 1px solid black;
}

.first-gene {
    height: 50%;
    width: 42%;
    border-right: 1px solid black;
    overflow: auto;
    display: none;
}

.second-gene {
    height: 50%;
    width: 42%;
    overflow: auto;
    display: none;
}

.both-genes {
    display: none;
    height: 100%;
    width: 84%;
}

.selected-item {
    background-color: #5cb85c;
    font-weight: bold;
}

.btn-rna {
    margin: 0.5% 0 0 0.3%;
}

.interaction-header {
    margin: 0.5% 0 0 1%;
    background-color: #f8f8f8;
    font-weight: bold;
    height: 3%;
}

.interaction-header a {
    margin-left: 1%;
    font-weight: normal;
    color: black;
}

.single-interactions-info {
    padding-top: 0.5%;
    display: inline-block;
    width: 49%;
    height: 50%;
    overflow: auto;
}

#info-gene1 {
    margin: 0 1% 0 1%;
    overflow: hidden;
}

#info-gene2 {
    border-left: 1px solid black;
    padding-left: 1%;
    overflow: hidden;
}

.alignment-canvas {
    margin-left: 5%;
}

#rna-alignment-graphics1 p, #rna-alignment-graphics2 p {
    margin-left: 10%;
    font-size: 13pt;
}

#rna-alignment-graphics1 svg, #rna-alignment-graphics2 svg {
    margin-top: 3%;
}

.rna-footer {
    margin-left: 45%;
}

.rna-footer a {
    color: black;
}

.symbol-link {
    cursor: pointer;
}

.search-input {
    position: relative;
}
.search-input input { 
    border: none;
    background: #fff;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.search-input img {
    position: absolute;
    width: 10%;
    top: 7px;
    right: 20px;
    cursor: pointer;
}

.chkbx-interaction {
    margin: 1%;
}

.plus-icon {
    vertical-align: text-bottom;
    margin: 1%;
    width: 8%;
    cursor: pointer;
}

.rna-pair-interaction {
    vertical-align: text-bottom;
    margin: 1%;
}

.symbols-records {
    padding-left: 10%;
}

.sym-record {
    border-bottom: 1px black solid;
    width: max-content;
    cursor: pointer;
}

.check-all-interactions span {
    vertical-align: text-bottom;
    padding: 0.5%;
}

.mfe-info {
    margin-left: 1%;
}
